body.logged-in {
	background-color: $light-bg!important;
}

* {
	border-color: $border-color-light !important;
}

.route-home, .route-profile, .TwitterCardsGrid, .route-connect {

	.tweet, .tweet:hover {
		background: $tweet-bg;
		color: $tweet-text-color;
	}

	.tweet {
		border-bottom: 1px solid $tweet-separator-color;
	}

	.fullname {
		color: $tweet-name-color;
	}

	h2.TwitterCard-title {
		color: $twitter-summary-card-title-color;
	}

	.SummaryCard-content p {
		color: $twitter-summary-card-text-color
	}

	.QuoteTweet-fullname {
		color: $tweet-name-color;
	}

	.QuoteTweet-text {
		color: $quote-tweet-text-color;
	}

	.TwitterCard-container {
		border-color: $twitter-card-container-border-color;
	}

	.DashboardProfileCard-content {
		background: $dashboard-profile-card-content-bg;
	}

	.DashboardProfileCard-name {
		color: $dashboard-profile-card-name-color;
	}

	.ProfileCardStats-statValue {
		color: $profile-card-stats-color;
	}

	.DashboardProfileCard-avatarImage, .DashboardProfileCard-avatarLink {
		border-color: $dashboard-profile-card-avatar-border-color;
	}

	.DashboardProfileCard-bg {
		border-bottom: none;
	}

	.module .flex-module {
		background-color: $flex-module-bg;
	}

	.Trends {
		background-color: $trends-bg;
	}

	.u-sizeFit {
		color: #fff;
	}

	.TwitterCard-container--clickable:hover {
		background: $dark-bg;
	}

	.Trends .trend-location {
		color: $white;
	}

	.wtf-module h3 {
		color: $white;
	}

	.home-tweet-box, .LiveVideo-tweetBox, .RetweetDialog-commentBox, .WebToast-box--altColor,
	.modal-container.tweet-showing .modal-tweet,
	.RetweetDialog-footer,
	.modal-header,
	.inline-reply-tweetbox,
	.suggested-tweet-stream .tweet:hover,
	.suggested-tweet-stream,
	.permalink .in-reply-to .stream-item, .permalink .in-reply-to .stream-item .tweet:hover,
	.conversation-module .conversation-tweet-item .tweet:hover,
	.permalink.light-inline-actions.stream-uncapped.has-replies.original-permalink-page,
	.DashboardProfileCard-avatarLink,
	.ProfileCard,
	.stream-end-inner,
	.social-proof-label,
	ol.conversation-module.stream-items.js-navigable-stream.collapsed-ancestors,
	.stream-item.has-recap.stream-item.separated-module {
		background-color: $dark-bg;
	}

	.modal-header {
		border-bottom-color: $border-color-light;
	}

	.permalink .in-reply-to .tweet, .permalink .replies-to .tweet,
	.permalink.has-replies .inline-reply-tweetbox {
		border-color: $border-color-light;
	}

	li.missing-tweets-bar {
		background-color: $missing-tweets-bar-bg;
	}

	p.TweetTextSize.js-tweet-text.tweet-text,
	.modal-header .modal-title,
	h3.promoted-heading,
	.profile-card-listName,
	.missing-tweets-link, .missing-tweets-link:hover,
	.u-textTruncate,
	.PollXChoice-choice--text,
	.bio-container,
	.FollowStatus,
	.tweet.permalink-tweet,
	.recap-header {
		color: $white;
	}

	.permalink .stream-end-inner,
	.FollowStatus {
		background-color: $border-color-light;
	}

	.ProfileCard-avatarLink {
		border-color: $dark-bg !important;
	}

	.QuoteTweet-text a,
	.QuoteTweet .tweet-content, .QuoteTweet-text a, .QuoteTweet-text a:hover,
	.QuoteTweet-text a:focus, .QuoteTweet-text a:active,
	.QuoteTweet-text .pretty-link b, .QuoteTweet-text .pretty-link s,
	.QuoteTweet-text .pretty-link:hover b, .QuoteTweet-text .pretty-link:hover s,
	.QuoteTweet-text .pretty-link:focus b, .QuoteTweet-text .pretty-link:focus s,
	.QuoteTweet-text .pretty-link:active b, .QuoteTweet-text .pretty-link:active s,
	.fullname {
		color: $link-color;
	}

	.TweetBox-photoIntent .photo-selector .btn {
		border-color: transparent !important;
	}
}

.route-profile {
	.ProfileCanopy-navBar,
	.WhoToFollow,
	.ProfileNav-item--userActions {
		background-color: $dark-bg;
	}
	.ProfileNav-value,
	.WhoToFollow-users .fullname,
	.ProfileNav-item.is-active .ProfileNav-value, .ProfileNav-item.is-active:hover .ProfileNav-value,
	.Footer-link {
		color: $link-color;
	}
	.ProfileHeading-content {
		background-color: $dark-bg;
	}
	.ProfileHeading-toggleItem.is-active, .ProfileHeading-toggleItem.is-active:hover, .ProfileHeading-toggleItem.is-active:focus,
	.ProfileHeaderCard-bio,
	.ProfileHeaderCard-locationText,
	.ProfileHeaderCard-joinDateText,
	.ProfileHeaderCard-birthdateText,
	.ProfileHeaderCard-vineProfileText,
	.ProfileHeaderCard-onlineHoursText {
		color: $white;
	}
	.flex-module {
		background-color: transparent!important;
	}
	.ProfileHeaderCard-nameLink,
	.Footer-link,
	.ProfileHeaderCard-urlText {
		color: $link-color!important;
	}
}

.ProfileCard-bio, .ProfileCard-locationAndUrl {
	color: $text-grey!important;
}

// notifications tab
.route-connect {
	.ProfileHeading-toggle,
	.stream-item {
		background-color: $dark-bg!important;
	}
	.stream-item-activity-line {
		color: $text-grey!important;
	}
	.ProfileHeading-toggleItem.is-active,
	.ProfileHeading-toggleItem.is-active:hover {
		color: $white;
	}
}

.ActivityItem-displayText {
	color: $white;
}

// DMs
.DMActivity {
	.DMActivity-header,
	.DirectMessage--received .Caret:before,
	.DMActivity-body {
		background-color: $dark-bg;
	}
	.DMNotice,
	.DMInboxItem:hover,
	.DMInboxItem.is-unread,
	.DirectMessage--received .DirectMessage-message,
	.DirectMessage--received .DirectMessage-text,
	.DMConversation-composer,
	.DMPopoverMenu {
		background-color: $light-bg!important;
	}
	.FoundMediaSearch-content.Caret:after {
		border-color: $dark-bg;
	}
	.DMPopover-content.Caret:after,
	.DirectMessage--received .Caret:before,
	.DMInbox-toolbar.DMComposeButton:focus {
		border-color: $light-bg!important;
	}
	.DirectMessage--received .DirectMessage-message.with-text.Caret.Caret--left.dm-message:before {
		border-bottom-color: transparent!important;
		border-top-color: transparent!important;
	}
	.Caret--top:before, .Caret--top.Caret--stroked:after {
		border-left-color: transparent!important;
		border-right-color: transparent!important;
		border-top-color: transparent!important;
	}
	.EdgeButton.EdgeButton--primary.tweet-action {
		background-color: $link-color;
	}
}

// Quote tweets in DM
.QuoteTweet-container {
	background-color: $dark-bg!important;
	border-color: $link-color!important;
}

.DirectMessage--sent .Caret:before, .DirectMessage--sent .Caret:after {
	border-left-color: transparent!important;
}

.DirectMessage--sent .QuoteTweet, .DirectMessage--sent .QuoteTweet:hover {
	border-color: $link-color!important;
}

// common styles - across all pages

// this looks to be the class used to apply user selected theme for all links
// overriding it with link color
.u-textUserColor {
	color: $link-color!important;
}

#global-actions>li>a, {
	border-color: $nav-bar-icon-color !important;
}

.global-nav-inner {
	background-color: $nav-bar-bg!important;
}

.nav>li>a .text {
	color: $nav-bar-text-color!important;
}

.nav {
	.Icon--home:before, .Icon--notifications:before, .Icon--dm:before, .Icon--lightning:before {
		color: $nav-bar-icon-color!important;
	}
}

.stream-container .new-tweets-bar {
		&, &:hover {
		background: $new-tweets-bar-bg;
		color: $new-tweets-bar-text-color;
		border-color: $border-color-light;
	}
}

.Trends--blankBackground,
.Footer--blankBackground,
.tweet.permalink-tweet,
.permalink-inner.permalink-tweet-container,
.dropdown-menu,
.stream.suggested-tweet-stream.permalink-replies,
.tweet,
.tweet:hover,
.ThreadedConversation-viewOther,
.permalink,
.modal-content,
.modal-header,
.PollingCardComposer,
.profile-card,
.ProfileCard,
.profile-social-proof,
.GridTimeline-items,
.hovercard.gravity-south:not(.with-banner) .arrow,
.hovercard .arrow,
.ThreadedConversation-showMore {
	background-color: $dark-bg!important;
}

.DashUserDropdown.dropdown-menu li>a,
.DashUserDropdown.dropdown-menu li>button {
	color: $white;
}

// border top of this element distorts the UI a bit when
// the container's bg is same as border color
.GridTimeline-items .Grid:first-child .ProfileListItem {
	border-top: 0;
}

.FoundMediaSearch-query {
	background-image: none;
}

.inline-reply-tweetbox.swift,
.thumbnail-container,
.FollowStatus,
.FoundMediaSearch-query,
.GridTimeline-footerIcon,
.GridTimeline-footer:before {
	background-color: $light-bg!important;
}

.FoundMediaSearch-content.Caret:after {
	border-color: $light-bg;
}

.tweet.permalink-tweet,
.stream.suggested-tweet-stream.permalink-replies,
.tweet-text,
.modal-title,
.bio-container .bio,
.ProfileNameTruncated,
.account-group .fullname,
.ProfileListItem-bio.u-dir {
	color: $white!important;
}

.fullname {
	color: $link-color!important;
}

.inline-reply-tweetbox.swift,
.stream.suggested-tweet-stream.permalink-replies,
.ThreadedConversation, .ThreadedConversation-showMore:after, .ThreadedConversation-viewOther .view-other-link,
.ThreadedConversation, .ThreadedConversation-showMore, .ThreadedConversation-showMore:after,
.ThreadedConversation+.ThreadedConversation--loneTweet,
:not(.ThreadedConversation--ownReply)+.ThreadedConversation--ownReply,
.ThreadedConversation--ownReply+.ThreadedConversation--loneTweet:not(.ThreadedConversation--ownReply),
.ThreadedConversation--loneTweet:first-child {
	border-color: $border-color-light!important;
}

.caret-inner {
	border-bottom-color: $light-bg!important;
}

.caret-outer, .caret-inner {
	border-color: transparent!important;
}

.photo-tagging-controls.user-select-controls {
	background-color: $white!important;
}


// style for user select box for tagging a photo
.typeahead-user-item-info .fullname {
	color: $white!important;
}

// keyboard shortcuts modal
.keyboard-shortcuts th {
	color: $white!important;
}
.sc-key {
	box-shadow: none!important;
}

// account page - /settings/account
.content-header .header-inner,
.content-inner,
.DashboardProfileCard,
#settings_nav li a,
#notifications-optout-all-top,
.notification-prompt.notifications-web-soft-prompt,
.find-friends-top-subheader,
.find-friends-sources,
.stream-end-inner,
.stream-item {
	background-color: $dark-bg!important;
}

.find-friends-list li:hover {
	background-color: $light-bg!important;
}

#settings_nav .list-link,
.control-label,
.DashboardProfileCard-name,
.settings-header,
.t1-label,
#notifications-optout-all-top,
.notification-prompt.notifications-web-soft-prompt,
.find-friends-top-subheader,
.source,
.content,
.FacebookConnect-title,
.controls,
#content-main-heading,
.header-cell.application-column,
.header-cell.date-column,
.header-cell.ip-column,
.view-toggler .active,
.Icon--device {
	color: $white!important;
}

.t1-select,
.controls input {
	color: #000;
}

.supported-text,
.application-column,
.date-column,
.ip-column {
	color: $text-grey;
}

#settings_nav .list-link:hover,
.QuoteTweet .tweet-content,.QuoteTweet-text a,.QuoteTweet-text a:hover,
.QuoteTweet-text a:focus,.QuoteTweet-text a:active,.QuoteTweet-text .pretty-link b,
.QuoteTweet-text .pretty-link s,.QuoteTweet-text .pretty-link:hover b,
.QuoteTweet-text .pretty-link:hover s,.QuoteTweet-text .pretty-link:focus b,
.QuoteTweet-text .pretty-link:focus s,.QuoteTweet-text .pretty-link:active b,
.QuoteTweet-text .pretty-link:active s {
		color: $link-color!important;
}

.flex-module {
	background-color: $dark-bg!important;
}

// alert messages - try saving a setting to see this
.message {
	background-color: $light-bg!important;
}
.message-text {
	color: $white!important;
}

// logged out state
body.logged-out {
	background-color: $light-bg!important;
}

// Moments page styles
.MomentGuideNavigation-label, .MomentGuideVTwoCapsuleSummary-title, .MomentCapsuleCover-title {
	color: $nav-bar-text-color!important;
}

.MomentsGuidePage-content, .MomentGuideNavigation, .MomentGuideVTwoCapsuleGroup .MomentGuideVTwoCapsuleSummary--portrait, .MomentGuideVTwoCapsuleSummary--hero, .MomentCapsuleVTwoItemTweet--withText,
.MomentGuideVTwoCapsuleSummary.MomentGuideVTwoCapsuleSummary--small,
.ListCreationModule {
	background-color: $dark-bg!important;
}

.MomentsPage.MomentsPermalinkPage,
.MomentsPage.MomentsGuidePage {
	background-color: $light-bg !important;
}

.MomentGuideVTwoCapsuleSummary-description, .MomentUserByline-fullname, .MomentCapsuleCover-description {
	color: lighten($text-grey, 7%)!important;
}

.MomentsPage.MomentsPermalinkPage, .MomentsPage.MomentsGuidePage {
	background-color: $light-bg!important;
}

.QuoteTweet-fullname.u-linkComplex-target,
.MomentSportsScores-contentWrapper {
	color: $white;
}

.MomentCapsuleSummary-details {
	background-color: $dark-bg;
}

.MomentCapsuleSummary-title {
	color: $white;
}

.MomentCapsuleSummary-title:hover {
	text-decoration: none
}

.MomentCapsuleItemTweet--withText {
	background-color: $darkgreyishblue;
}

.u-dir[dir="ltr"] {
	color: $white;
}

._timestamp, .js-short-timestamp, .js-relative-timestamp {
	color: $white;
}

.MomentCapsuleItemTweet-date {
	color: $white;
}

.MomentCapsuleItemTweet--withMedia {
    background-color: $darkgreyishblue;
    padding: 5px;
}

.TwitterCard .MomentCard {
	background-color: $light-bg;
}

// Change trends window
.trends-current-location {
	color: $text-grey!important;
}

.Trends, .WhoToFollow, .AdaptiveRelatedSearches, .SidebarFilterModule, .AdaptiveFiltersBar {
	background-color: $trends-bg;
}

// Advanced search page
.search.advanced-search {
	background-color: $trends-bg;
	h1, span {
		color: $white;
	}
	.input-daterange .input-group-addon {
		background-color: $trends-bg;
	}
}

// twitter poll result
.PollXChoice-choice--chart {
	background-color: $light-bg!important;
}

// tweet activity
// this iframe's body doesn't contain any class, so applying styles to body directly
// this shouldn't break anything, hopefully
.ep-Section, .ep-ColumnLeft, .ep-ColumnRight {
	background-color: $light-bg;
	color: $white;
}

.ep-Header .ep-Title, .ProfileTweet-fullname,
.ep-TweetPerformance.ep-Section .ep-Metric .ep-MetricTopContainer,
.ep-TweetPerformance.ep-Section .ep-EngagementsTable .ep-EngagementsTableHeader {
	color: $white;
}

.ProfileListItem {
	background-color: $dark-bg;
}

// live video page / moments
.LiveVideoOfficialAccount, .LiveVideo-tweetBox {
	background-color: $dark-bg;
}

.LiveVideoDetails-title {
	color: $white;
}

.ThreadedConversation-moreReplies {
	background-color: $light-bg;
}

// photo gallery has a transparent background for tweet which shows only on hover
.Gallery.with-tweet .GalleryTweet.enable-fade .content>* {
	opacity: 0;
    -ms-filter: "alpha(opacity=0)";
    transition: opacity .25s ease-in,visibility .25s ease-in;
    visibility: hidden;
}

.Gallery.with-tweet .GalleryTweet.enable-fade .stream-item-footer {
	opacity: 1;
    -ms-filter: "alpha(opacity=100)";
    visibility: visible;
}

.Gallery.with-tweet .GalleryTweet .tweet, .Gallery.with-tweet .Gallery-content:hover .GalleryTweet.enable-fade .tweet {
	background-color: rgba(20,29,38,.5)!important;
	opacity: 1;
}

.Gallery.with-tweet .GalleryTweet.enable-fade .tweet {
	background-color: rgba(20,29,38,0)!important;
}
